<template>
    <div class="table-editor">
        <el-form :inline="true" :model="formInline">
            <el-form-item label="行数">
                <el-input-number v-model="formInline.row" :min="1" style="width: 150px;"></el-input-number>
            </el-form-item>
            <el-form-item label="列数">
                <el-input-number v-model="formInline.col" :min="1" style="width: 150px;"></el-input-number>
            </el-form-item>
            <el-form-item>
                <el-button v-if="genTimes===0" type="primary" @click="fGenerate">生成表格</el-button>
                <el-popconfirm v-else
                    title="将删除既有表格和填入的内容，确认重新生成吗？"
                    icon="el-icon-warning"
                    icon-color="#f00"
                    @confirm="fGenerate"
                >
                    <el-button slot="reference" type="warning">重新生成表格</el-button>
                </el-popconfirm>
            </el-form-item>
        </el-form>

        <div style="height: 400px; padding: 15px; border: 1px solid #d0d0d0; background: #f5f5f5; margin-bottom: 20px;">
            <el-table :show-header="true" :data="tableData" border
                :height="tableInnerHeight"
                ref="tableRef"
                v-if="tshow"
            >
                <el-table-column
                    v-for="(col, index) in columnData"
                    :key="`plan_management_list_${col.prop || col.slotIdentify}_${index}`"
                    v-bind="col"
                >
                    <template slot-scope="{ row, $index }">
                        <el-dropdown v-if="col.slotIdentify === 'operation'" @command="handleCommand" placement="top">
                            <span class="el-dropdown-link">
                                操作行
                                <i class="el-icon-caret-top"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="`above-${$index}`">在上方插入行</el-dropdown-item>
                                <el-dropdown-item :command="`below-${$index}`">在下方插入行</el-dropdown-item>
                                <el-dropdown-item :command="`del-${$index}`">删除此行</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <!-- <span>{{ col.formatter ? col.formatter(row, column) : row[col.prop] }}</span> -->
                        <el-input v-else 
                            v-model="row[col.prop]"
                            type="textarea"
                            autosize 
                            size="small" 
                            class="text-align-center"
                        ></el-input>
                    </template>
                    <template slot="header" slot-scope="{ $index }">
                        <span v-if="col.slotIdentify === 'operation'"></span>
                        <el-dropdown v-else @command="handleCommandCol" placement="bottom">
                            <span class="el-dropdown-link">
                                操作列
                                <i class="el-icon-caret-bottom"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="`left-${$index}`">在左侧插入列</el-dropdown-item>
                                <el-dropdown-item :command="`right-${$index}`">在右侧插入列</el-dropdown-item>
                                <el-dropdown-item :command="`del-${$index}`">删除此列</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TableEditor",
        data() {
            return {
                formInline: {
                    row: 1,
                    col: 1
                },
                genTimes: 0,
                tableInnerHeight: 370,
                columnData: [],
                tableData: [],
                tshow: true
            }
        },
        methods: {
            fGenerate() {
                if (!this.formInline.row) {
                    this.$message.warning(`请输入行数!`);
                    return
                }
                if (!this.formInline.col) {
                    this.$message.warning(`请输入列数!`);
                    return
                }
                this.columnData = [];
                this.tableData = [];
                for (let index = 0; index < this.formInline.col; index++) {
                    this.$set(this.columnData, index, {
                        prop: `params-${index}`
                    })
                }
                for (let index = 0; index < this.formInline.row; index++) {
                    const obj = {};
                    this.columnData.forEach((item, jndex) => {
                        obj[item.prop] = ""
                    })
                    this.$set(this.tableData, index, obj)
                }
                // 添加操作列
                this.$set(this.columnData, this.columnData.length, {
                    label: "操作",
                    slotIdentify: "operation",
                    align: "center",
                    width: 80,
                    fixed: "right"
                })
                this.genTimes++;
            },
            handleCommand(command) {
                const [prefix, $index] = command.split("-");
                const index = Number($index);
                if (prefix === "above") {
                    this.insertAbove(index)
                } else if (prefix === "below") {
                    this.insertBelow(index)
                } else if (prefix === "del") {
                    this.deleteRow(index)
                }
            },
            insertAbove(index) {
                const obj = {};
                this.columnData.filter((v, index) => index!==this.columnData.length-1).forEach((item, jndex) => {
                    obj[item.prop] = ""
                })
                this.tableData.splice(index, 0, obj)
            },
            insertBelow(index) {
                const obj = {};
                this.columnData.filter((v, index) => index!==this.columnData.length-1).forEach((item, jndex) => {
                    obj[item.prop] = ""
                })
                const len = this.tableData.length
                if (index === len - 1) {
                    this.tableData.push(obj)
                } else {
                    this.tableData.splice(index + 1, 0, obj)
                }
            },
            deleteRow(index) {
                this.tableData.splice(index, 1)
            },
            handleCommandCol(command) {
                const [prefix, $index] = command.split("-");
                const index = Number($index);
                if (prefix === "left") {
                    this.insertLeft(index)
                } else if (prefix === "right") {
                    this.insertRight(index)
                } else if (prefix === "del") {
                    this.deleteCol(index)
                }
                this.tshow = false
                this.$nextTick(() => {
                    this.tshow = true
                })
                /* console.log(this.columnData.map(v => v.prop))
                console.log(this.tableData.map(v => v)) */
            },
            insertLeft(index) {
                const prop = `params-${this.columnData.length-1}`;
                this.columnData.splice(index, 0, {
                    prop
                })
                this.tableData.forEach(row => {
                    this.$set(row, prop, "")
                })
            },
            insertRight(index) {
                const prop = `params-${this.columnData.length-1}`;
                this.columnData.splice(index+1, 0, {
                    prop
                })
                this.tableData.forEach(row => {
                    this.$set(row, prop, "")
                })
            },
            deleteCol(index) {
                this.tableData.forEach(row => {
                    delete row[this.columnData[index].prop]
                })
                this.columnData.splice(index, 1)
            },
        }
    }
</script>

<style scoped>
.table-editor {
    display: block;
}
.table-editor >>> .el-table td.el-table__cell {
    padding: 0;
}
.table-editor >>> .el-table td.el-table__cell > div.cell {
    padding: 0;
}
.table-editor >>> .el-table th.el-table__cell > div.cell {
    text-align: center;
}
.table-editor >>> .el-input.text-align-center .el-input__inner {
    border-radius: 0;
    border: none;
}
.table-editor >>> .el-textarea.text-align-center .el-textarea__inner {
    padding: 5px;
    border-radius: 0;
    resize: none;
}
.table-editor >>> .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}
.table-editor >>> .el-table .el-dropdown {
    font-size: 12px;
    font-weight: bold;
}
</style>